<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black"><title></title>
    <link href="css/mui.min.css" rel="stylesheet"/>
	<link rel="stylesheet" href="css/style.css" />
	<style type="text/css">
		.mui-slider-indicator .mui-indicator{
			width: 27%;
			height: 5px;
			margin: 1px 3px;
			display: inline-block;
			line-height: 0;
			border-radius: 0; 
			border: 0;
			box-shadow: none;
			background-color: #e7e7e5;
		}
		.mui-slider-indicator{
			width: 40%;
			left: 30%;
			margin: 8px auto 0;
			line-height: 0;
		}
		.mui-slider-indicator:nth-child(2){
			margin: 0 5%;
		}
		.mui-slider-indicator .mui-active.mui-indicator{
			background: #777878;
		}
	</style>
</head>
<body>
	<div class="mui-content">
		<div class="app_info_list" style="height:200px;">
			
			<div class="app_info">
				<div class="app_img_border_big" style="width:130px;height:130px;">
					<div class="app_img_border" style="width:100px;height:100px;">
						<div class="app_img" style="height:80px;width:80px;"></div>
					</div>
				</div>
				<div class="app_user_name">
					<p>张三</p>
					<p>管理员</p>
				</div>
			</div>
		
			
			<div class="app_project">
				<div>
					<div>办理任务中</div>
					<div>(60)</div>
				</div>
				<div>
					<div>项目</div>
					<div>(230)</div>
				</div>
				<div>
					<div>合同</div>
					<div>(230)</div>
				</div>
			</div>
		
		</div>
		
		<div class="mui-slider" style="top:210px;left:0;position:absolute;">
			<div class="mui-slider-indicator" style="top: 0px;bottom: auto;">
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator mui-active"></div>
			</div>
			<div class="mui-slider" style="height:400px">
			<div class="mui-slider-indicator" style="top: 0px;bottom: auto;">
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator mui-active"></div>
			</div>
			<div class="mui-slider-group" style="margin-top: 15px;height:100%;width:100%;position:absolute;">
				<div class="mui-slider-item">暂无</div>
			    <div class="mui-slider-item">暂无</div>
			    <div class="mui-slider-item mui-active">
					<div class="app_meun" style="height:100%">
						<div class="app_meun_top">
							<div id="myTask" class="app_meun_my"></div>
							<div class="app_meun_right">
								<div id="progress" class="meun_another_view"></div>
								<div id="contract" class="meun_contract"></div>
							</div>
						</div>
						<div class="app_meun_bottom">
							<div id="bill" class="meun_bill"></div>
							<div id="statistics" class="meun_statistics"></div>
							<div id="customer" class="meun_customer"></div>
						</div>
					</div>
			    </div>
			</div>
		</div>
		</div>
	
	</div>
	<script src="js/mui.min.js"></script>
	<script src="js/config.js"></script>
	<script src="js/comn.js"></script>
	<script src="js/login.js"></script>
	<script type="text/javascript" charset="utf-8">
	mui.plusReady(function(){
		mui.init();
		
		
		mui('#myTask')[0].addEventListener('tap',function(event){
			mui.toast('我的任务');
		});
		
		mui('#progress')[0].addEventListener('tap',function(event){
			mui.toast('项目管理');
		});
		
		mui('#contract')[0].addEventListener('tap',function(event){
			mui.toast('合同管理');
		});
		
		mui('#bill')[0].addEventListener('tap',function(event){
			mui.toast('票据');
		});
		
		mui('#statistics')[0].addEventListener('tap',function(event){
			mui.toast('统计');
		});
		
		mui('#customer')[0].addEventListener('tap',function(event){
			mui.toast('客户');
		});
		
		mui('#myTask')[0].addEventListener('tap',function(event){
			mui.toast('我的任务');
		});
		
		
		
		var gallery = mui('.mui-slider');
		gallery.slider({
	  		interval:0//自动轮播周期，若为0则不自动播放，默认为0；
		});
		
	});
	
	</script>
</body>
</html>